<template>
  <view
    class="page-action"
    :class="actionClass"
  >
    <view class="page-action-box van-hairline--top">
      <slot></slot>
    </view>
    <view class="page-action-placeholder"></view>
  </view>
</template>

<script>
export default {
  name: 'PageAction',
  props: {
    location: {
      type: String,
      default: ''
    },
    safeAreaInsetBottom: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
    }
  },
  computed: {
    actionClass () {
      let classes = []
      if (this.safeAreaInsetBottom) {
        classes.push('page-action--safe')
      }
      return classes
    }
  },
  created () {
  },
  methods: {
  }
}
</script>

<style lang="less">
.page-action {
  box-sizing: initial;
  height: 50px;
  &-box {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    box-sizing: initial;
    background: #fff;
    .van-button {
      width: 100%;
      border: none;
    }
    [is*='button'] {
      flex: 1;
    }
  }
  &--safe {
    padding-bottom: env(safe-area-inset-bottom);
    .page-action-box {
      padding-bottom: env(safe-area-inset-bottom);
    }
  }
}
</style>
